Day05 時 , 我們製作了一個可傳入參數的 neuomorphic-button

<neuomorphic-button icon="fas fa-wifi"></neuomorphic-button>

不知道有沒有 邦友 改變過那個 icon 的參數值 ?

• font-awesome 圖示對照表

icon 名稱	對應圖示
fas fa-wifi
fas fa-phone

Gif 中我將 icon="fas fa-wifi" 改成 icon="fas fa-phone" , 不過按鈕裡面的圖示並沒有跟著改變

這是怎麼一回事呢 ? 讓我們一同來深入探究吧 !

Web Component 的生命週期

Web Component 跟 React . Vue 相同有生命週期的存在 , 不過只有 5 個

生命週期的順序如下圖所示

根據上表 , 我們了解到在 icon 發生變化時 , 需要利用 attributeChangedCallback 來更改實際顯示的 icon

實作開始

註冊 attributeChangedCallback 事件

class NeuomorphicButton extends HTMLElement {

  constructor() {

    ...如昨天所示之內容
  }

  attributeChangedCallback(name, oldValue, newValue) {
  
      console.table({name, oldValue, newValue})
  }
}

window.customElements.define('neuomorphic-button', NeuomorphicButton);

設定要監聽的屬性在 observedAttributes 中

class NeuomorphicButton extends HTMLElement {

  constructor() {

    ...如昨天所示之內容
  }

+  static get observedAttributes() {
+    return ['icon']
+  }

  attributeChangedCallback(name, oldValue, newValue) {
  
      console.table({name, oldValue, newValue})
  }
}

window.customElements.define('neuomorphic-button', NeuomorphicButton);

監聽到 icon 屬性改變時 , 將內部的 <i> 上的 class 也一同改變

attributeChangedCallback(name, oldValue, newValue) {

  const shadowRoot = this.shadowRoot;

  if (name === 'icon'){

    const i = shadowRoot.querySelector('i');
    i.className = newValue;
  }
  
}

之後圖示就會跟著我們的 icon 屬性一起變化

如果想直接體驗成果 , 請到 web-component-attributeChangedCallback.html 查看

參考資料 :

• Udemy 課程 - Web Components & Stencil.js - Build Custom HTML Elements
• webcomponents 官方網站 - 使用生命周期回调函数